<template>
  <a-card :bordered="false">
    <h2>冗余数据清洗策略设置</h2>
    <a-form
      :form="form"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 12 }"
      @submit="handleSubmit"
    >
      <a-form-item label="冗余数据源">
        <span class="ant-form-text">
          {{ dataCleanDetail.sourceName }}
        </span>
      </a-form-item>
      <a-form-item label="数据冗余清洗">
        <a-switch v-decorator="['clearEnabled', { initialValue: this.dataCleanDetail.enabled || false, valuePropName: 'checked' }]" />
      </a-form-item>
      <!-- <a-form-item label="清洗时间" extra="将清洗上方选择时间之前（包括当天）的数据">
        <a-date-picker
          v-decorator="['effectTime', decoratorOptions.effectTime]"
          :showToday="false"
          :disabledDate="disabledDate"
        />
      </a-form-item> -->
      <a-form-item label="清洗策略">
        <a-radio-group v-decorator="['clearPolicy', decoratorOptions.clearPolicy]">
          <a-radio
            v-for="(d, i) in clearPolicyMap"
            :key="i"
            :value="i"
          >
            {{d}}
          </a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        style="margin-top: 20px;"
        :wrapper-col="{ span: 12, offset: 3 }"
      >
        <a-button
          type="primary"
          html-type="submit"
        > 提交 </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import moment from 'moment'
  import { gPostAction } from '@/api/manage'

  export default {
    name: 'F010201',
    data() {
      return {
        form: this.$form.createForm(this),
        dataCleanDetail: {},
        clearPolicyMap: {
          'replace': '替换',
          'delete': '删除',
        },
        decoratorOptions: {
          effectTime: {
            rules: [{ required: true, message: '请选择清洗时间' }],
          },
          clearPolicy: {
            rules: [{ required: true, message: '请选择清洗策略' }],
          }
        },
      }
    },
    mounted() {
      this.getDataClean()
    },
    methods: {
      getDataClean() {
        gPostAction('/dataClean/get1', {}).then((res) => {
          if (res.success) {
            this.dataCleanDetail = res.data || {}
            this.form.setFieldsValue({
              // effectTime: res.data.cleanTime ? moment().subtract(res.data.cleanTime, 'days') : '',
              clearPolicy: this.dataCleanDetail.operateType,
            })
          }
        })
      },
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            const postData = {
              id: this.dataCleanDetail.id,
              // cleanTime: moment().diff(values.effectTime, 'days'),
              source: this.dataCleanDetail.source,
              operateType: values.clearPolicy,
              enabled: values.clearEnabled,
            }

            gPostAction('/dataClean/update1', postData).then((res) => {
              if (res.success) {
                this.$message.success('操作成功')
              }
            })
          }
        })
      },
      disabledDate(currentDate) {
        return currentDate.diff(moment(), 'days') > -1 ? true : false
      },
    }
  }
</script>

<style
  lang="less"
  scoped
>
  /deep/ .ant-row.ant-form-item .ant-form-item-label {
    margin-right: 20px;
  }
</style>